import Vue from 'vue'

const getEventHandle = function (data) {
  const fn = (e) => {
    if (!e._kpma_vts) {
      e._kpma_vts = Date.now()
    } else if (e._kpma_vts <= fn.attached) {
      return
    }
    e.stopPropagation()
    e.preventDefault()
    fn.callBack(e)
  }
  fn.attached = Date.now()
  Object.assign(fn, data)
  return fn
}
const clickHandle = function (e) {
  e.preventDefault
  console.log('go in handle')
  const { el, binding, vnode, prevVnode } = this
  console.log('event', e, e.clientX, e.clientY, binding.value.currentUrl)

  let x = e.clientX
  let y = e.clientY
  let currentUrl = binding.value.currentUrl.split('/').pop()
  let point = {
    x,
    y,
    value: 1,
  }
  console.log('point', point)
}
// 使用demo  v-track = "{triggerType:'click',currentUrl:$route.path,behavior:'点击xxx',businessCode:xx,actionType:'xx-click'}"
Vue.directive('track', {
  mounted(el, binding, vnode, prevVnode) {
    el._kpma_event = getEventHandle({
      el,
      binding,
      vnode,
      prevVnode,
      callBack: clickHandle,
    })
    console.log('go bind event')
    el.addEventListener('click', el._kpma_event)
  },

  unmounted(el) {
    console.log('go unbind event')
    el.removeEventListener('click', el._kpma_event)
  },
})
